import React from 'react'
import { AutoComplete } from 'antd';

const { Option } = AutoComplete;

export default  class Complete extends React.Component {
  state = {
    result: [],
  };

  handleSearch = value => {
    let result =(!value || value.indexOf('@') >= 0)? []: ['163.com','126.com', 'qq.com','gmail.com',].map(domain => `${value}@${domain}`)
    this.setState({ result });
  };

  render() {
    const { result } = this.state;
    return (
      <AutoComplete style={{ width: 200 }} onSearch={this.handleSearch} placeholder="在这里输入">
        {result.map(email => <Option key={email}>{email}</Option>)}
      </AutoComplete>
    );
  }
}